<template>
  <el-dialog
    v-model="centerDialogVisible"
    title="验证"
    width="max-content"
    destroy-on-close
    center
  >
    <slide-verify
      ref="block"
      :accuracy="2"
      @again="onAgain"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
    />
  </el-dialog>
</template>

<script setup>
import SlideVerify from "vue3-slide-verify";
import { ref } from "vue";
function onSuccess() {
  console.log("sucess");
}
const centerDialogVisible = ref(false);
function verify() {
  centerDialogVisible.value = true;
}
defineExpose({ verify });
</script>

<style scope>
@font-face {
  font-family: iconfont;
  src: url(data:font/ttf;base64,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)
    format("truetype");
}
.iconfont[data-v-2f9639f2] {
  font-family: iconfont !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-fail[data-v-2f9639f2]:before {
  content: "\e6d5";
}
.icon-success[data-v-2f9639f2]:before {
  content: "\eb09";
}
.icon-arrow-right[data-v-2f9639f2]:before {
  content: "\eb08";
}
.icon-refresh[data-v-2f9639f2]:before {
  content: "\e654";
}
.slide-verify[data-v-2f9639f2] {
  position: relative;
}
.slide-verify-loading[data-v-2f9639f2] {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  z-index: 999;
  animation: loading-2f9639f2 1.5s infinite;
}
.slide-verify-block[data-v-2f9639f2] {
  position: absolute;
  left: 0;
  top: 0;
}
.slide-verify-refresh-icon[data-v-2f9639f2] {
  position: absolute;
  right: 0;
  top: 0;
  width: 34px;
  height: 34px;
  cursor: pointer;
}
.slide-verify-refresh-icon .iconfont[data-v-2f9639f2] {
  font-size: 34px;
  color: #fff;
}
.slide-verify-slider[data-v-2f9639f2] {
  position: relative;
  text-align: center;
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin-top: 15px;
  background: #f7f9fa;
  color: #45494c;
  border: 1px solid #e4e7eb;
}
.slide-verify-slider-mask[data-v-2f9639f2] {
  position: absolute;
  left: 0;
  top: 0;
  height: 40px;
  border: 0 solid #1991fa;
  background: #d1e9fe;
}
.slide-verify-slider-mask-item[data-v-2f9639f2] {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background: #fff;
  box-shadow: 0 0 3px #0000004d;
  cursor: pointer;
  transition: background 0.2s linear;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide-verify-slider-mask-item[data-v-2f9639f2]:hover {
  background: #1991fa;
}
.slide-verify-slider-mask-item:hover .iconfont[data-v-2f9639f2] {
  color: #fff;
}
.slide-verify-slider-mask-item-icon[data-v-2f9639f2] {
  line-height: 1;
  font-size: 30px;
  color: #303030;
}
.container-active .slide-verify-slider-mask[data-v-2f9639f2] {
  height: 38px;
  border-width: 1px;
}
.container-active .slide-verify-slider-mask-item[data-v-2f9639f2] {
  height: 38px;
  top: -1px;
  border: 1px solid #1991fa;
}
.container-success .slide-verify-slider-mask[data-v-2f9639f2] {
  height: 38px;
  border: 1px solid #52ccba;
  background-color: #d2f4ef;
}
.container-success .slide-verify-slider-mask-item[data-v-2f9639f2] {
  height: 38px;
  top: -1px;
  border: 1px solid #52ccba;
  background-color: #52ccba !important;
}
.container-success .slide-verify-slider-mask .iconfont[data-v-2f9639f2] {
  color: #fff;
}
.container-fail .slide-verify-slider-mask[data-v-2f9639f2] {
  height: 38px;
  border: 1px solid #f57a7a;
  background-color: #fce1e1;
}
.container-fail .slide-verify-slider-mask-item[data-v-2f9639f2] {
  height: 38px;
  top: -1px;
  border: 1px solid #f57a7a;
  background-color: #f57a7a !important;
}
.container-fail .slide-verify-slider-mask .iconfont[data-v-2f9639f2] {
  color: #fff;
}
.container-active .slide-verify-slider-text[data-v-2f9639f2],
.container-success .slide-verify-slider-text[data-v-2f9639f2],
.container-fail .slide-verify-slider-text[data-v-2f9639f2] {
  display: none;
}
@keyframes loading-2f9639f2 {
  0% {
    opacity: 0.7;
  }
  to {
    opacity: 9;
  }
}
.btn[data-v-c0eedc34] {
  margin-top: 20px;
  outline: 0;
  border: none;
  padding: 8px 15px;
  border-radius: 5px;
  color: #fff;
  background-color: #1890ff;
  cursor: pointer;
}
.btn[data-v-c0eedc34]:active {
  box-shadow: 1px 5px #0000001a inset;
}
</style>
